<template>
  <view class="wrap">
    <view class="symptom">{{ symptom }}</view>
    <image
      class="bannerImg"
      src="https://ainengli.hzjrsw.com/jkhx/weight/traditionalResult.png"
      alt=""
    />
    <view class="contentWrap">
      <view class="content">
        <view class="card card15">
          <view class="title">
            <text class="border" />
            <text class="name">自测分值</text>
          </view>
          <echart
            v-if="chartInfo.option.categories.length > 0"
            class="echart"
            :chartInfo="chartInfo"
          />
          <view class="characteristic">
            <text class="name">总体特征</text>
            <view class="article"> {{ resultInfo.generalFeature }} </view>
          </view>
          <view class="characteristic">
            <text class="name">体型特征</text>
            <view class="article"> {{ resultInfo.physicalFeature }} </view>
          </view>
          <view class="characteristic">
            <text class="name">常见表现</text>
            <view class="article"> {{ resultInfo.commonSymptom }} </view>
          </view>
        </view>
        <view class="card">
          <view class="title">
            <text class="border" />
            <text class="name">指导建议</text>
          </view>
          <view class="suggestionList">
            <view class="item">
              <text class="name">饮食护理：</text>
              <view class="article">
                {{ resultInfo.dietAdvice }}
              </view>
            </view>
            <view class="item">
              <text class="name">运动护理：</text>
              <view class="article">
                {{ resultInfo.sportAdvice }}
              </view>
            </view>
            <view class="item">
              <text class="name">情志调摄：</text>
              <view class="article">
                {{ resultInfo.emotion }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { question_score } from '../../api/sleep'
import echart from './component/echart'

const userInfo = ref({})
const questionnaireId = ref('')
const chartInfo = ref({
  id: 'selfScore',
  option: {
    categories: [
      // '阳虚质',
      // '阴虚质',
      // '气虚质',
      // '痰湿质',
      // '湿热质',
      // '血瘀质',
      // '特禀质',
      // '气郁质',
      // '平和质'
    ],
    series: [
      {
        data: [],
        textColor: '#7C5221'
      }
    ]
  }
})
const resultInfo = ref({})
const symptom = ref('')

onLoad((option: any) => {
  questionnaireId.value = option && option.id ? option.id : ''
})

onShow(() => {
  userInfo.value = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  init()
})

const init = () => {
  const params = {
    id: questionnaireId.value,
    empi: userInfo.value.empi
  }
  question_score(params).then((res) => {
    if (res.code == 0) {
      symptom.value = res.data.symptom
      resultInfo.value = JSON.parse(res.data.conclusion)
      if (resultInfo.value.scores && resultInfo.value.scores.length > 0) {
        resultInfo.value.scores.forEach((item: any) => {
          chartInfo.value.option.categories.push(item.name)
          chartInfo.value.option.series[0].data.push(item.score)
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  position: relative;
  min-height: 100vh;
  padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
  background: #f2ebe1;

  .symptom {
    position: absolute;
    top: 128rpx;
    left: 38rpx;
    height: 60rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 60rpx;
    color: #603d30;
    background: #fff;
    border-radius: 8rpx;
  }

  .bannerImg {
    display: block;
    width: 100%;
    height: 300rpx;
  }

  .contentWrap {
    // background: linear-gradient(to bottom, rgb(242 235 225 / 20%) 5%, rgb(242 235 225 / 100%));

    .content {
      padding: 0 24rpx 24rpx;
      margin: 0 32rpx;
      background: #fff;
      border-radius: 24rpx;

      .card {
        margin-bottom: 24rpx;

        &.card15 {
          margin-top: -80rpx;
        }

        .title {
          padding: 32rpx 0;

          .border {
            display: inline-block;
            width: 8rpx;
            height: 32rpx;
            vertical-align: middle;
            background: #a46b39;
            border-radius: 0 8rpx 8rpx 0;
          }

          .name {
            display: inline-block;
            margin-left: 16rpx;
            font-size: 36rpx;
            font-weight: 700;
            color: #222;
            vertical-align: middle;
          }
        }

        .echart {
          height: 320rpx;
        }

        .characteristic {
          margin-top: 32rpx;
          margin-left: 10rpx;

          .name {
            display: inline-block;
            width: 158rpx;
            height: 56rpx;
            font-size: 28rpx;
            font-weight: 700;
            line-height: 56rpx;
            color: #fff;
            text-align: center;
            background: #a46b39;
            border-top-left-radius: 28rpx;
            border-bottom-right-radius: 28rpx;
          }

          .article {
            padding: 32rpx 24rpx;
            margin-top: -8rpx;
            font-size: 28rpx;
            color: #603d30;
            background: #fef8f1;
            border-radius: 8rpx;
          }
        }

        .suggestionList {
          .item {
            padding: 24rpx;
            margin-top: 32rpx;
            color: #603d30;
            background: #fef8f1;
            border-radius: 8rpx;

            &:nth-child(1) {
              margin-top: 0;
            }

            .name {
              font-size: 32rpx;
              font-weight: 700;
            }

            .article {
              margin-top: 16rpx;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }
}
</style>
